<template>
    <div class="pop-jump-link">
        <el-dialog title="添加跳转路径" :visible.sync="dialogVisible" width="50%" top="5vh">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="产品分类" name="4" v-if="is_good && form.type !== 'mar_info'">
                    <div class="content-box comm-list">
                        <el-tree v-if="dataList4.length > 0" :data="dataList4" :props="defaultProps"
                            @node-click="handleNodeClick($event)" :default-expand-all="true"
                            :expand-on-click-node="false"></el-tree>
                        <empty v-else />
                    </div>
                </el-tab-pane>

                <el-tab-pane label="产品详情" name="1" v-if="is_good && form.type !== 'mar_info'">
                    <div class="search-box">
                        <el-select v-model="searchForm1.objtype" class="select-w" size="small">
                            <el-option v-for="item in optionsData1" :key="item.code" :label="item.name"
                                :value="item.code">
                            </el-option>
                        </el-select>
                        <el-input v-model="searchForm1.kw" class="input-w" size="small" :placeholder="`请输入${getpName(
                            searchForm1.objtype
                        )}`"></el-input>
                        <el-button type="primary" size="small" @click="searchFun">搜索</el-button>
                        <el-button size="small" @click="resetFun">重置</el-button>
                    </div>
                    <div class="content-box list-box comm-list" v-infinite-scroll="loadFun">
                        <div class="list" v-if="dataList1.length > 0">
                            <div class="list-row" v-for="item in dataList1" :key="item.id"
                                @click="handleNodeClick(item)">
                                <div class="list-info">
                                    <div class="img-box">
                                        <img :src="item.imgs ? item.imgs : img_buf
                                            " alt="" />
                                    </div>
                                    <div class="info-box">
                                        <div class="title">
                                            <span>{{ item.title }}</span>
                                        </div>
                                        <div class="phone">
                                            <span>库存：{{ item.qty }}</span>
                                        </div>
                                        <div class="tiem">
                                            <span>{{ item.price }}</span>
                                            <span class="f-num" v-if="item.total_num > 0">{{ item.total_num }}</span>
                                        </div>
                                        <div class="tag-box">
                                            <span v-for="(tag_item, tag_index) in item.tagsInfo" :key="tag_index"
                                                :style="{
                                                    backgroundColor:
                                                        color_data[tag_index],
                                                }">{{ tag_item }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <empty v-else />
                    </div>
                </el-tab-pane>

                <el-tab-pane label="服务" name="2" v-if="is_yy && form.type !== 'mar_info'">
                    <div class="search-box">
                        <el-select v-model="searchForm2.objtype" class="select-w" size="small">
                            <el-option v-for="item in optionsData2" :key="item.code" :label="item.name"
                                :value="item.code">
                            </el-option>
                        </el-select>
                        <el-input v-model="searchForm2.kw" class="input-w" size="small" :placeholder="`请输入${getpName(
                            searchForm2.objtype
                        )}`"></el-input>
                        <el-button type="primary" size="small" @click="searchFun">搜索</el-button>
                        <el-button size="small" @click="resetFun">重置</el-button>
                    </div>
                    <div class="content-box list-box comm-list" v-infinite-scroll="loadFun">
                        <div class="list" v-if="dataList2.length > 0">
                            <div class="list-row" v-for="item in dataList2" :key="item.id"
                                @click="handleNodeClick(item)">
                                <div class="list-info">
                                    <div class="img-box">
                                        <img :src="item.imgs ? item.imgs : img_buf
                                            " alt="" />
                                    </div>
                                    <div class="info-box">
                                        <div class="title">
                                            <span>{{ item.title }}</span>
                                        </div>
                                        <div class="phone">
                                            <span>库存：{{ item.qty }}</span>
                                        </div>
                                        <div class="tiem">
                                            <span>{{ item.price }}</span>
                                            <span class="f-num" v-if="item.total_num > 0">{{ item.total_num }}</span>
                                        </div>
                                        <div class="tag-box">
                                            <span v-for="(
tag_item, tag_index
                                                ) in item.tagsInfo" :key="tag_index" :style="{
                                                    backgroundColor:
                                                        color_data[tag_index],
                                                }">{{ tag_item }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <empty v-else />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="营销产品标签" name="7" v-if="md === 'asm' && form.type !== 'mar_info'">
                    <div class="content-box comm-list" v-infinite-scroll="loadFun">
                        <div class="list" v-if="dataList7.length > 0">
                            <div class="list-row7" v-for="item in dataList7" :key="item.id"
                                @click="handleNodeClick(item)">
                                <div class="title">{{ item.tag_name }}</div>
                                <div class="info">
                                    <span class="num">共{{ item.gd_num }}个产品</span>
                                    <span class="doc">{{
                                        item.show_type == 1
                                            ? "列表展示"
                                            : "并列展示"
                                    }}</span>
                                </div>
                            </div>
                        </div>
                        <empty v-else />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="限时抢购" name="5" v-if="is_xsqg">
                    <div class="content-box comm-list" v-infinite-scroll="loadFun">
                        <div class="list" v-if="dataList5.length > 0">
                            <div class="list-row5" v-for="item in dataList5" :key="item.id"
                                @click="handleNodeClick(item)">
                                <div class="title-box">
                                    <span class="title">{{ item.title }}</span>
                                    <span class="status">{{
                                        item.status_txt
                                        }}</span>
                                </div>
                                <div class="time">
                                    活动时效
                                    {{
                                        `${item.time_from_txt}至${item.time_to_txt}`
                                    }}
                                </div>
                                <div class="num">
                                    参与产品 {{ parseInt(item.num_gd) }}
                                </div>
                            </div>
                        </div>
                        <empty v-else />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="拼团优惠" name="6" v-if="is_hdpt">
                    <div class="content-box comm-list" v-infinite-scroll="loadFun">
                        <div class="list" v-if="dataList6.length > 0">
                            <div class="list-row5" v-for="item in dataList6" :key="item.id"
                                @click="handleNodeClick(item)">
                                <div class="title-box">
                                    <span class="title">{{ item.title }}</span>
                                    <span class="status">{{
                                        item.status_txt
                                        }}</span>
                                </div>
                                <div class="num">
                                    <span>拼团人数
                                        {{ parseInt(item.num_pin) }}</span>
                                    <span>参与产品
                                        {{ parseInt(item.num_gd) }}</span>
                                </div>
                                <div class="time">
                                    活动时效
                                    {{
                                        `${item.time_from_txt}至${item.time_to_txt}`
                                    }}
                                </div>
                            </div>
                        </div>
                        <empty v-else />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="社群" name="10" v-if="md === 'asm' && form.type !== 'mar_info'">
                    <div class="content-box comm-list" v-infinite-scroll="loadFun">
                        <div class="list" v-if="dataList10.length > 0">
                            <div class="list-row10" v-for="item in dataList10" :key="item.id"
                                @click="handleNodeClick(item)">
                                <div class="left-name">
                                    <span>{{ item.title[0] }}</span>
                                </div>
                                <div class="right-info">
                                    <div class="title-box">
                                        <span class="title">{{
                                            item.title
                                            }}</span>
                                        <span class="status">{{
                                            item.status_tit
                                            }}</span>
                                    </div>
                                    <div class="doc">
                                        <span>{{ item.sp_name }}</span>
                                        <span>{{
                                            `${item.province_txt}${item.city_txt}`
                                            }}</span>
                                    </div>
                                    <div class="num">
                                        <span>人数 {{ item.num_c }}</span>
                                        <span>蜜盒 {{ item.num_mh }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <empty v-else />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="推广页" name="11" v-if="md === 'asm' && form.type !== 'mar_info'">
                    <div class="content-box comm-list" v-infinite-scroll="loadFun">
                        <div class="list" v-if="dataList11.length > 0">
                            <div class="list-row5" v-for="item in dataList11" :key="item.id"
                                @click="handleNodeClick(item)">
                                <div class="time">{{ item.shop_name }}</div>
                                <div class="title-box">
                                    <span class="title">{{
                                        item.type_txt
                                        }}</span>
                                    <span class="status">{{
                                        item.status_txt
                                        }}</span>
                                </div>
                                <div class="time">{{ item.title }}</div>
                                <div class="time">{{ item.des }}</div>
                            </div>
                        </div>
                        <empty v-else />
                    </div>
                </el-tab-pane>

                <el-tab-pane label="投票报名" name="8" v-if="is_tpbm">
                    <div class="search-box">
                        <el-select size="mini" class="" v-model="dataForm8.time" placeholder="请选择"
                            @change="selectFun">
                            <el-option v-for="item in time_data" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-select class="ml10" size="mini" v-model="dataForm8.type" placeholder="请选择"
                            @change="selectFun">
                            <el-option v-for="item in activityTypeDict" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="content-box list-box comm-list" v-infinite-scroll="loadFun">
                        <div class="list" v-if="dataList8.length > 0">
                            <div class="list-row8" v-for="item in dataList8" :key="item.id"
                                @click="handleNodeClick(item)"> 
                                <div class="bold font_size16">{{ item.title }}</div>
                                <div class="time">活动类型：{{ activityTypeDictMap[item.type] }}</div>
                                <div class="time">活动日期：{{ item.time_from_txt }} 至 {{ item.time_to_txt }}</div>
                            </div>
                        </div>
                        <empty v-else />
                    </div>
                </el-tab-pane>

                <el-tab-pane label="其他" name="9" v-if="form.type !== 'mar_info'">
                    <div class="content-box comm-list" v-infinite-scroll="loadFun">
                        <div class="list" v-if="dataList9.length > 0">
                            <div class="list-row5" v-for="item in dataList9" :key="item.id"
                                @click="handleNodeClick(item)">
                                <div class="time">{{ item.title }}</div>
                            </div>
                        </div>
                        <empty v-else />
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import empty from "@/components/comm/empty.vue";
import config from "@/js/conf/Config.js";
import staticConst from "@/js/const/StaticConst.js";
import { activityDict, timeData } from '@/utils/dict.js'

export default {
    props: ["idyun", "is_yy", "is_good", "is_xsqg", "is_hdpt", "is_tpbm", "md"],
    components: { empty },
    computed: {},
    data() {
        return {
            form: {},
            is_search1: false,
            is_search2: false,
            img_buf: staticConst.GOOD_IMG,
            dialogVisible: false,
            activeName: "4",
            searchForm1: {
                catid: "",
                customerid: "",
                exact: "2",
                grade: 0,
                kw: "",
                objtype: "",
                pfrom: 0,
                pnum: 20,
            },
            searchForm2: {
                catid: "",
                customerid: "",
                exact: "2",
                grade: 0,
                kw: "",
                objtype: "",
                pfrom: 0,
                pnum: 20,
            },
            optionsData1: [],
            optionsData2: [],
            defaultProps: {
                children: "son",
                label: "title",
            },
            color_data: [
                "#3989fc",
                "#ee464b",
                "#19c56b",
                "#fd641c",
                "#3989fc",
                "#ee464b",
            ],
            dataForm1: {
                catid: "",
                pfrom: 0,
                pnum: 20,
                page: "1",
                idyun: this.idyun,
                storeid: 0,
                is_stock: "",
            },
            dataForm2: {
                pfrom: 0,
                pnum: 20,
                idyun: this.idyun,
                is_n: "1",
            },
            dataForm7: {
                pfrom: 0,
                pnum: 20,
                is_all: 2,
                type: "tag_info",
                idyun: this.idyun,
            },
            dataForm5: {
                pfrom: 0,
                pnum: 20,
                is_all: 2,
                type: "tag_info",
                idyun: this.idyun,
            },
            dataForm6: {
                dtime: "",
                pfrom: 0,
                pnum: 20,
                shopid_yd: this.idyun,
                st: "2",
                stime: "",
                time: "0",
            },
            dataForm10: {
                city: "",
                pfrom: 0,
                pnum: 20,
                province: "",
                shopid_yd: this.idyun,
            },
            dataForm11: {
                pfrom: 0,
                pnum: 20,
                shopid_yd: this.idyun,
                st: "2",
                type: "1",
            },
            dataForm9: {
                shopid_yd: this.idyun,
            },
            dataForm8: {
                shopid_yd: this.idyun,
                type: "",
                st: "2",
                pnum: 20,
                pfrom: 0,
                stime: "",
                time: 0
            },
            activityTypeDict:[
                {
                    value: '',
                    label: "全部类型"
                },
                ...activityDict.activityTypeDictList
            ],
            activityTypeDictMap: activityDict.activityTypeDictMap,
            time_data: timeData,
            dataList1: [], //产品列表
            dataList2: [], //服务列表
            dataList4: [], //分类列表
            dataList7: [], //分类列表
            dataList5: [], //限时抢购列表
            dataList6: [], //拼团优惠列表
            dataList10: [], //社群列表
            dataList11: [], //推广页列表
            dataList9: [], //其他列表
            dataList8: [], //投票报名列表
            is_soll1: true,
            is_soll2: true,
            is_soll7: true,
            is_soll5: true,
            is_soll6: true,
            is_soll10: true,
            is_soll11: true,
            is_soll9: true,
            is_soll8: true,
        };
    },
    created() { },
    mounted() { },
    methods: {
        initData(data) {
            this.dialogVisible = true;
            this.activeName = "4";
            if (data.type === "mar_info" && this.is_xsqg) {
                this.activeName = "5";
            } else if (data.type === "mar_info" && this.is_hdpt) {
                this.activeName = "6";
            }
            this.handleClick();
            this.form = data;
        },
        handleClick() {
            const val = this.activeName;
            if (this[`dataList${val}`].length == 0) {
                this[`getlistdata${val}`]();
            }
            if (
                (val == 1 || val == 2) &&
                this[`optionsData${val}`].length == 0
            ) {
                this.getSearchtypeList();
            }
        },
        getpName(code) {
            const val = this.activeName;
            let name = "";
            if (val == 1 || val == 2) {
                this[`optionsData${val}`].map((v) => {
                    if (v.code == code) {
                        name = v.name[1] + v.name[2];
                    }
                });
            }
            return name;
        },
        // 重置
        resetFun() {
            const val = this.activeName;
            this[`dataList${val}`] = [];
            this[`dataForm${val}`].pfrom = 0;
            this[`getlistdata${val}`]();
            this[`searchForm${val}`].kw = "";
            this[`searchForm${val}`].objtype = this[`optionsData${val}`][0].code;
            if (val == 1) {
                this.is_search1 = false;
            }
            if (val == 2) {
                this.is_search2 = false;
            }
        },
        // 搜索产品
        searchFun() {
            const val = this.activeName;
            if (!this[`searchForm${val}`].kw) return;
            this[`searchForm${val}`].pfrom = 0;
            if (val == 1) {
                this.is_search1 = true;
            }
            if (val == 2) {
                this.is_search2 = true;
            }
            this[`dataList${val}`] = [];
            this.getSearchlist();
        },

        // 选择
        handleNodeClick(data) {
            this.form.gd_type = this.activeName;
            this.form.gd_id = data.id;
            if (this.form.gd_txt2 != undefined) {
                this.form.gd_txt2 = data.title || data.tag_name;
            } else {
                this.form.gd_name = data.title || data.tag_name;
            }
            this.dialogVisible = false;
        },

        // 滚动加载
        loadFun() {
            const val = this.activeName;
            if (this[`is_soll${val}`] || val == 4) return;
            if (
                (val == 1 && this.is_search1) ||
                (val == 2 && this.is_search2)
            ) {
                this[`searchForm${val}`].pfrom += 20;
                this.getSearchlist();
            } else {
                this[`dataForm${val}`].pfrom += 20;
                this[`getlistdata${val}`]();
            }
        },

        // 获取搜索的产品列表
        async getSearchlist() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url =
                val == 1 ? config.SEARCH_S_GOODS : config.SEARCH_S_GOODS_YY;
            let param = this[`searchForm${val}`];
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                if (res.data.goods_ls) {
                    this[`dataList${val}`] = this[`dataList${val}`].concat(
                        res.data.goods_ls
                    );
                    setTimeout((v) => {
                        this[`is_soll${val}`] = false;
                    }, 200);
                } else {
                    this[`is_soll${val}`] = true;
                }
            }
        },

        // 获取产品搜索方式列表
        async getSearchtypeList() {
            const val = this.activeName;
            let url = config.SEARCH_S_OBJTYPE_LS;
            let param = { ch: val == 1 ? "gd" : "xm", grade: 0 };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.es_ls) {
                    res.data.es_ls.map((v) => {
                        v.name = `按${v.name}`;
                    });
                    this[`searchForm${val}`].objtype = res.data.es_ls[0].code;
                    this[`optionsData${val}`] = res.data.es_ls;
                }
            }
        },
        //
        // 获取分类列表
        async getlistdata4() {
            let url = config.GDPRE_CAT_LS;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.dataList4 = res.data;
            }
        },
        // 获取产品列表
        async getlistdata1() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url = config.GOODS_LIST;
            let param = this[`dataForm${val}`];
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.goodsInfo) {
                    res.data.goodsInfo.map((v) => {
                        v.total_num = 0;
                        v.total_pic = 0;
                        if (v.tagsInfo) {
                            v.tagsInfo.unshift("上架");
                        } else {
                            v.tagsInfo = ["上架"];
                        }
                    });
                    this[`dataList${val}`] = this[`dataList${val}`].concat(
                        res.data.goodsInfo
                    );
                    setTimeout((v) => {
                        this[`is_soll${val}`] = false;
                    }, 200);
                } else {
                    this[`is_soll${val}`] = true;
                }
            }
        },
        // 获取服务列表
        async getlistdata2() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url = config.YY_GOODSINFO_GOODS_LIST;
            let param = this[`dataForm${val}`];
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.goods_ls) {
                    res.data.goods_ls.map((v) => {
                        v.total_num = 0;
                        v.total_pic = 0;
                        if (v.tagsInfo) {
                            v.tagsInfo.unshift("上架");
                        } else {
                            v.tagsInfo = ["上架"];
                        }
                    });
                    this[`dataList${val}`] = this[`dataList${val}`].concat(
                        res.data.goods_ls
                    );
                    setTimeout((v) => {
                        this[`is_soll${val}`] = false;
                    }, 200);
                } else {
                    this[`is_soll${val}`] = true;
                }
            }
        },
        // 获取营销产品标签
        async getlistdata7() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url = config.COMPSET_LINKER_LS;
            let param = this[`dataForm${val}`];
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.linker_ls) {
                    this[`dataList${val}`] = this[`dataList${val}`].concat(
                        res.data.linker_ls
                    );
                    setTimeout((v) => {
                        this[`is_soll${val}`] = false;
                    }, 200);
                } else {
                    this[`is_soll${val}`] = true;
                }
            }
        },
        // 获取限时抢购
        async getlistdata5() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url = config.YX_XS_EVENT_LS;
            let param = this[`dataForm${val}`];
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.ls) {
                    this[`dataList${val}`] = this[`dataList${val}`].concat(
                        res.data.ls
                    );
                    setTimeout((v) => {
                        this[`is_soll${val}`] = false;
                    }, 200);
                } else {
                    this[`is_soll${val}`] = true;
                }
            }
        },
        // 获取拼团优惠
        async getlistdata6() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url = config.YX_PIN_EVENT_LS;
            let param = this[`dataForm${val}`];
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.ls) {
                    this[`dataList${val}`] = this[`dataList${val}`].concat(
                        res.data.ls
                    );
                    setTimeout((v) => {
                        this[`is_soll${val}`] = false;
                    }, 200);
                } else {
                    this[`is_soll${val}`] = true;
                }
            }
        },
        // 获取社群
        async getlistdata10() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url = config.ASMH_ST2_GROUP_LS;
            let param = this[`dataForm${val}`];
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.ls) {
                    this[`dataList${val}`] = this[`dataList${val}`].concat(
                        res.data.ls
                    );
                    setTimeout((v) => {
                        this[`is_soll${val}`] = false;
                    }, 200);
                } else {
                    this[`is_soll${val}`] = true;
                }
            }
        },
        // 获取推广页
        async getlistdata11() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url = config.YX_TG_EVENT_LS;
            let param = this[`dataForm${val}`];
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.ls) {
                    this[`dataList${val}`] = this[`dataList${val}`].concat(
                        res.data.ls
                    );
                    setTimeout((v) => {
                        this[`is_soll${val}`] = false;
                    }, 200);
                } else {
                    this[`is_soll${val}`] = true;
                }
            }
        },
        // 获取其他
        async getlistdata9() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url = config.COMPSET_LIN_ORTHER_LS;
            let param = this[`dataForm${val}`];
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.lin_ls) {
                    this[`dataList${val}`] = this[`dataList${val}`].concat(
                        res.data.lin_ls
                    );
                    setTimeout((v) => {
                        this[`is_soll${val}`] = false;
                    }, 200);
                } else {
                    this[`is_soll${val}`] = true;
                }
            }
        },

        // 获取投票报名
        async getlistdata8() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let param = this[`dataForm${val}`];
            console.log("paramxxx=", param)
            let res = await this.$api({ url: config.YY_EVENT_LS, data: param });
            if (res.status == 1) {
                console.log("res.data.lin_ls=", res.data)
                if (res.data.ls) {
                    this[`dataList${val}`] = this[`dataList${val}`].concat(
                        res.data.ls
                    );
                    setTimeout((v) => {
                        this[`is_soll${val}`] = false;
                    }, 200);
                } else {
                    this[`is_soll${val}`] = true;
                }
                console.log("xxxxx=", this[`dataList${val}`])
            }
        },

        selectFun(e) {
            console.log("e=", e)
            this[`dataList${this.activeName}`] = []
            this[`dataForm${this.activeName}`].pfrom = 0
            this[`dataForm${this.activeName}`].pnum = 20
            this.getlistdata8()
        }
    },
};
</script>

<style lang="scss" scoped>
.pop-jump-link {
    ::v-deep.el-dialog__wrapper {
        .el-dialog__body {
            padding-top: 0;
        }

        .el-tabs {
            .el-tabs__item {
                font-size: 16px;
            }

            .el-tabs__nav {}
        }
    }

    .content-box {
        height: 600px;
    }

    .select-w {
        width: 100px;
        margin-right: 10px;
    }

    .input-w {
        width: calc(100% - 242px);
        margin-right: 10px;
    }

    .search-box {
        padding-bottom: 10px;
    }

    .list-box {
        height: 520px;
        overflow: auto;

        .list-row {
            padding: 10px 0;
            border-bottom: 1px #f2f2f2 solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 30px;
            cursor: pointer;

            .list-info {
                display: flex;
                width: 100%;

                .img-box {
                    width: 100px;
                    height: 100px;
                    margin-right: 10px;
                    border-radius: 5px;
                    background: #eaeaea;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    span {
                        font-size: 16px;
                        font-weight: bold;
                    }
                }

                .info-box {
                    width: calc(100% - 80px);

                    .title {
                        font-size: 14px;
                    }

                    .phone {
                        font-size: 12px;
                        color: #9c9a9a;
                        margin: 5px 0;

                        span {
                            margin-right: 10px;
                        }
                    }

                    .tiem {
                        width: 100%;
                        font-size: 12px;
                        color: #fa4848;
                        display: flex;
                        justify-content: space-between;

                        .f-num {
                            padding: 0 20px;
                            background: #3388ff;
                            color: #fff;
                            font-size: 12px;
                            margin-left: 10px;
                        }
                    }

                    .tag-box {
                        span {
                            border-radius: 3px;
                            background: #3388ff;
                            color: #fff;
                            font-size: 12px;
                            padding: 2px 4px;
                            margin-right: 5px;
                        }
                    }
                }
            }

            .list-avitve {
                font-size: 20px;
                color: #3388ff;
            }
        }
    }

    .list-row7,
    .list-row5,
    .list-row10 {
        padding: 10px;
        border-top: 1px solid #f2f2f2;
        cursor: pointer;

        &:hover {
            background: #f2f2f2;
        }

        &:first-child {
            border: none;
        }
    }

    .list-row7 {
        .title {
            font-size: 14px;
            color: #303133;
        }

        .info {
            font-size: 12px;

            .num {
                margin-right: 10px;
            }

            .doc {
                color: #303133;
            }
        }
    }

    .list-row5 {
        .title-box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                font-size: 14px;
            }

            .status {
                font-size: 12px;
                color: #9a9a9a;
            }
        }

        .time {}

        .num {
            span {
                margin-right: 10px;
            }
        }
    }

    .list-row10 {
        display: flex;

        .left-name {
            width: 80px;
            height: 80px;
            background: #ededed;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;

            span {
                font-size: 20px;
                font-weight: bold;
            }
        }

        .right-info {
            width: calc(100% - 90px);

            .title-box {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .title {
                    font-size: 14px;
                }

                .status {
                    font-size: 12px;
                    color: #9a9a9a;
                }
            }

            span {
                margin-right: 10px;
            }
        }
    }

    .list-row8 {
        padding: 10px;
        border-top: 1px solid #f2f2f2;
        cursor: pointer;
        border-radius: 4px;
        &:hover {
            background: #f2f2f2;
        }

        &:first-child {
            border: none;
        }
    }

}
</style>
